<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <script src="../../day6jquery/jquery3.5.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 100px 300px;
            display: flex;
        }

        .left {
            width: 190px;
            height: 470px;
            background-color: aquamarine;
            margin-right: 10px;
            position: relative;
        }

        .right {
            width: 190px;
            height: 470px;
            background-color: yellowgreen;
        }

        .banner {
            width: 590px;
            height: 470px;
            overflow: hidden;
            margin-right: 10px;
            position: relative;
        }

        img {
            width: 590px;
            height: 470px;
        }

        .banner_img {
            background-color: thistle;
            position: absolute;
            width: 5900px;
            height: 470px;
            display: flex;
            z-index: 1;
            transition: all .3s;
            cursor: pointer;
        }

        .btn-left,
        .btn-right {
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 100%;
            position: absolute;
            top: 50%;
            z-index: 2;
            cursor: pointer;
        }

        .btn-left {
            left: 10px;
        }

        .btn-right {
            right: 5px;
        }

        .cir-btn {
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 3;
        }

        .cir-btn li {
            list-style-type: none;
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            margin-left: 10px;
            background-color: #aaa;
        }

        .active {
            background-color: #fff !important;
            cursor: pointer;
        }
        .text{
            color: #666;
            font-size: 16px;
            line-height: 20px;
            cursor: pointer;
            
        }
        .item1{
            width: 800px;
            height: 470px;
            background-color: #fff;
            border:1px solid #dad9d9;
            z-index: 9;
            position: absolute;
            left: 190px;
            top: 0;
            display: none;
        }
        ul li{
            list-style: none;
        }
        .box1{
            width: 100px;
            height: 1px;
            background: linear-gradient(90deg,white,#aaa,white);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
        <div class="left">
            <div class="item">
                <div class="text">
                    <a>手机</a><a>手机</a><a>手机</a>
                    <div class="item1">
                        <ul>
                            <li>电器管</li>
                            <li>家用电器</li>
                            <li></li>
                            <li>点器官</li>
                        </ul>
                    </div>
                </div>
                <div class="text">
                    <a>电脑</a><a>电脑</a><a>电脑</a>
                    <div class="item1">
                        <ul>
                            <li>2</li>
                            <li>家用电器</li>
                            <li></li>
                            <li>点器官</li>
                        </ul>
                    </div>
                </div>
                <div class="text">
                    <a>平板</a><a>平板</a><a>平板</a>
                    <div class="item1">
                        <ul>
                            <li>3</li>
                            <li>家用电器</li>
                            <li></li>
                            <li>点器官</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="banner">
            <div class="btn-left"></div>
            <div class="banner_img" style="left: 0px;">
                <img src="./slice5.png" />
                <img src="./slice1.png" />
                <img src="./slice2.png" />
                <img src="./slice3.png" />
                <img src="./slice4.png" />
                <img src="./slice5.png" />
                <img src="./slice4.png" />
                <img src="./slice3.png" />
                <img src="./slice2.png" />
                <img src="./slice1.png" />
            </div>
            <div class="btn-right"></div>
            <ul class="cir-btn">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="right"></div>
    </div>
    <script>
        let bannerImg = document.querySelector('.banner_img');
        let bannerLi = document.querySelector('.cir-btn');
        let timeStatus = null;
        let index = 0;
        //定时轮播调用函数
        autoPlay()
        function autoPlay() {
            timeStatus = setInterval(function () {
                leftM();
            }, 1000);
        };
        //左移
        function leftM() {
            let moveLeft;
            index++;
            if (index > 9) index = 0;
            $('.cir-btn li:eq(' + index + ')').addClass('active').siblings().removeClass('active');
            if (bannerImg.style.left === '-5310px') {
                moveLeft = 0;
            } else {
                moveLeft = parseInt(bannerImg.style.left) - 590;
            }
            bannerImg.style.left = moveLeft + 'px';
        };
        function rightM() {
            let moveright;
            index--;
            if (index < 0) index = 9;
            $('.cir-btn li:eq(' + index + ')').addClass('active').siblings().removeClass('active');
            if (bannerImg.style.left === '0px') {
                moveright = -5310;
            } else {
                moveright = parseInt(bannerImg.style.left) + 590;
            }
            bannerImg.style.left = moveright + 'px';
        };
        $(function () {
            $('.btn-left').click(function () {
                leftM();
            })
            $('.btn-right').click(function () {
                rightM();
            });
            $('.banner_img').hover(function () {
                clearInterval(timeStatus);
            }, function () {
                autoPlay();
            });
            //小圆点点击事件
            $('.cir-btn li').click(function () {
                //index等于当前的索引
                index = $(this).index();
                //当前元素添加类名其他兄弟元素清楚这个类名 排他
                $(this).addClass('active').siblings().removeClass('active');
                bannerImg.style.left = parseInt(-index * 590) + 'px';
                console.log(index, index * 590);
            })
        });
        $('.text').hover(function(){
            $(this).find('.item1').css('display','block')
        },function(){
            $(this).find('.item1').css('display','none')
        })
        
    </script>
</body>

</html>